<template>
    <div class="bottomBox">
        <div class="one" v-for="(item,index) in tablist" :key="index">
            <div :class="{iconfont:true,[item.icon]:true}"></div>
            <div class="shouye">{{item.text}}</div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            currentIndex:0,
            tablist:[
                {icon:'icon-shouye',text:'首页'},
                {icon:'icon-line_round_query',text:'爆爆团'},
                {icon:'icon-dingdan',text:'订单'},
                {icon:'icon-wode',text:'我的'},
            ]
        }
    }
}
</script>

<style scoped>
    .bottomBox{
        width: 95%;
        height: 80px;
        background-color: rgb(255, 255, 255);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
    }
    .one{
        width: 22%;
        text-align: center;
    }
    .iconfont{
        font-size: 26px;
        margin-bottom: 5px;
    }
</style>    